<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<el-input v-model="keyword" placeholder="请输入商品名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search" >查询商品</el-button>
				<el-button type="primary" @click="disableAddDept=true">新增商品</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="pageInfo.list" style="100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection"></el-table-column>
			<el-table-column
			label="商品编码"
			prop="goodcode"
			width="80"
			></el-table-column>
			<el-table-column label="商品名称" width="200">
				<template slot-scope="scope">
					<template v-if="scope.row.edit" >
						<el-input v-model="type.goodname" size="mini"></el-input>
					</template>
					<template >
						<span>{{scope.row.goodname}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="商品价格/元" width="200">
				<template slot-scope="scope">
					<template  v-if="scope.row.edit" >
						<el-input v-model="type.goodprice" size="mini"></el-input>
					</template>
					<template >
						<span>{{scope.row.goodprice}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="商品标注" width="200">
				<template slot-scope="scope">
					<template v-if="scope.row.edit" >
						<el-input  v-model="type.remark" size="mini"></el-input>
					</template>
					<template >
						<span>{{scope.row.remark}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-button @click="handleTypeSave(scope)" size="mini">保存</el-button>
						<el-button size="mini" @click="scope.row.edit=false">取消</el-button>
					</template>
					<template v-else>
						<el-button @click="handleTypeEdit(scope)" size="mini">编辑</el-button>
						<el-button size="mini" @click="handleTypeDel(scope)">删除</el-button>
					</template>					
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer">
			<el-button type="danger" size="mini" :disabled="ids.length==0" @click="batchDelete">批量删除</el-button>

		</div>
		<el-pagination
			layout="prev,pager,next,total,jumper,sizes"			
			:total="pageInfo.total"
			:page-size="pageInfo.pageSize"
			:page-count="pageInfo.navigatePages"
			:page-sizes="[5,10,15,20]"
			:current-page="pageInfo.pageNum"
			background
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		
		<el-dialog :visible.sync="disableAddDept" title="新增商品" center>
			<el-form :inline="true" aligin="center" size="mini">
				<el-form-item label="商品编码">
					<el-input v-model="type.goodcode" placeholder="商品编码"></el-input>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="type.goodname"  placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input placeholder="商品价格" v-model="type.goodprice"></el-input>
				</el-form-item>
				<el-form-item label="价格单位">
				      <el-input placeholder="价格单位" v-model="type.unit"></el-input>     
				   </el-form-item>
				   <el-form-item label="标记">
				         <el-input placeholder="标记" v-model="type.delmark"></el-input>     
				       </el-form-item>
				<el-form-item label="商品注释">
				      <el-input placeholder="商品注释" v-model="type.remark"></el-input>     
				    </el-form-item>
				
				<el-form-item>
					<el-button type="warning" @click="disableAddDept=false">取消</el-button>
					<el-button type="primary" @click="insertType()">保存</el-button>
				</el-form-item>
			</el-form>
			
			
		</el-dialog>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
				pageInfo:{
					pageNum:1,
					pageSize:5
				},
				type:{},
				keyword:'',
				disableAddDept:false,
				
				params:{},
				typeList:{},
				ids:[]
			}
			
		},
		created() {
			this.showData(1,this.pageInfo.pageSize,this.keyword);
		},
		methods:{
			showData(pageNum,pageSize,keyword){
				let url = "goodsmanage/getPaged";
				let params = `pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`;
				axios.post(url,params).then(resp=>{
					this.pageInfo = resp.data.data;
					
				});
			},
			handleCurrentChange(pageNum){
				this.showData(pageNum,this.pageInfo.pageSize,this.keyword);
			},
			handleSizeChange(pageSize){
				this.showData(1,pageSize,this.keyword);
				this.pageInfo.pageSize = pageSize;
			},
			search(){
				this.showData(1,this.pageInfo.pageSize,this.keyword);
			},
			insertType(){
				let url = "goodsmanage/insert";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){
						this.$alert("添加成功");
						this.showData(1,this.pageInfo.pageSize,this.keyword);
						this.disableAddDept = false;
						console.log(this.type);
					}
				});
			},
			handleTypeEdit(scope){
				//console.log(scope.$index,scope.row);
				this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			handleTypeSave(scope){
				let url = "goodsmanage/update";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){	
						scope.row.edit = false;
						scope.row.goodCode = this.type.goodCode;
						scope.row.goodName = this.type.goodName;
						scope.row.goodPrice = this.type.goodPrice;
						scope.row.unit = this.type.unit;
						scope.row.delmark = this.type.delmark;
						scope.row.remark = this.type.remark;
					}
					this.showData(1,this.pageInfo.pageSize,this.keyword);
				});
			},
			handleTypeDel(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "goodsmanage/delete";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword)
						}
					});
				}).catch(()=>{
					console.log("cancel");
				});
				
			},
			handleSelectionChange(item){
				this.ids = item.map(o=>o.id);
			},
			//批量删除
			batchDelete(){
				this.$confirm("是否删除?","提示").then(()=>{
					let url = "goodsmanage/batchDelete";
					
					axios.post(url,this.ids).then(resp=>{
						if(resp.data.data > 0){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword);
						}
					});
				}).catch(err=>{
					this.$alert(err);
				});
			}/* ,
			AddDept(){
				this.disableAddDept = true;
				let url = "goodsmanage/insert";
				
				axios.post(url).then(resp=>{
					this.typeList = resp.data.data;
					//console.log(this.typeList);
				});
			} */
		}
		
		
	}
</script>

<style>
</style>
